<mat-list-item class="container"
               [ngClass]="
               {
               'priorty-normal':item.priority===3,
               'priorty-important':item.priority===2,
               'priorty-emergency':item.priority===1
               }"
    (click)="onItemClick()"
   [@item]="widerPriority"
   [dragTag]="'task-item'"
   [dragData]="item"
   [app-draggable]="true" [draggedClass]="'drag-start'"
  >
  <mat-checkbox class="completion-status" [checked]="item.completed" (click)="onCheckboxClick($event,item)"></mat-checkbox>
  <div class="content" mat-line [ngClass]="{'completed':item.completed}"><span [matTooltip]="item.desc">{{item.desc}}</span></div>
  <div class="bottom-bar"  mat-line>
    <span class="due-date" *ngIf="item.dueDate">{{item.dueDate|date:"yy-MM-dd"}}</span>
    <ng-template [ngIf]="item.reminder">
      <mat-icon>alarm</mat-icon>
    </ng-template>

    <!--
    上面的等价于下面的简写写法 *是一个语法糖
    <mat-icon *ngIf="item.reminder">alarm</mat-icon>
    -->
  </div>
  <mat-icon [svgIcon]="avatar" mat-list-avatar class="avatar"></mat-icon>
</mat-list-item>
